﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>

      <script type="text/javascript">
          var map, poly;

          function GetMap() {
              // Initialize the map
              map = new Microsoft.Maps.Map(document.getElementById("myMap"),
              {
                  credentials: "YOUR_BING_MAPS_KEY"
              });

              //Register and load the Circle Module
              Microsoft.Maps.registerModule("CircleModule", "scripts/CircleModule.js");
              Microsoft.Maps.loadModule("CircleModule", {
                  callback: function () {
                      //Create a regular polygon that has 3 nodes (triangle) and rotate it 15 degrees
                        poly = new BM.RegularPolygon(map.getCenter(), 1000, 'km', 3, 15, {
                            fillColor: new Microsoft.Maps.Color(100, 0, 0, 255),
                            strokeColor: new Microsoft.Maps.Color(200, 0, 255, 0),
                            strokeThickness: 5
                        });

                        map.entities.push(poly);
                  }
              });
          }

          function createCanvasPins() {
          }
      </script>
   </head>
   <body onload="GetMap();">
	    <div id='myMap' style="position:relative;width:800px;height:600px;"></div><br />

        <fieldset style="float:left;width:200px;">
            <legend>Set Center</legend>
            <input type="button" value="Map Center" onclick="poly.setCenter(map.getCenter());" />
        </fieldset>

        <fieldset style="float:left;width:200px;">
            <legend>Set Radius</legend>
            <input type="button" value="100" onclick="poly.setRadius(100);" /><br />
            <input type="button" value="500" onclick="poly.setRadius(500);" /><br />
            <input type="button" value="1000" onclick="poly.setRadius(1000);" /><br />
            <input type="button" value="1500" onclick="poly.setRadius(1500);" /><br />
            <input type="button" value="2000" onclick="poly.setRadius(2000);" />
        </fieldset>

        <fieldset style="float:left;width:200px;">
            <legend>Set Node Size</legend>
            <input type="button" value="3" onclick="poly.setNodeSize(3);" /><br />
            <input type="button" value="4" onclick="poly.setNodeSize(4);" /><br />
            <input type="button" value="5" onclick="poly.setNodeSize(5);" /><br />
            <input type="button" value="6" onclick="poly.setNodeSize(6);" /><br />
            <input type="button" value="7" onclick="poly.setNodeSize(7);" /><br />
            <input type="button" value="8" onclick="poly.setNodeSize(8);" /><br />
            <input type="button" value="9" onclick="poly.setNodeSize(9);" /><br />
            <input type="button" value="10" onclick="poly.setNodeSize(10);" />
        </fieldset>

        <fieldset style="float:left;width:200px;">
            <legend>Set Offset (degrees)</legend>
            <input type="button" value="0" onclick="poly.setOffset(0);" /><br />
            <input type="button" value="15" onclick="poly.setOffset(15);" /><br />
            <input type="button" value="30" onclick="poly.setOffset(30);" /><br />
            <input type="button" value="45" onclick="poly.setOffset(45);" /><br />
            <input type="button" value="75" onclick="poly.setOffset(75);" /><br />
            <input type="button" value="90" onclick="poly.setOffset(90);" />
        </fieldset>

        <fieldset style="float:left;width:200px;">
            <legend>Set Polygon Options</legend>
            <input type="button" value="Fill Red" onclick="poly.setOptions({fillColor: new Microsoft.Maps.Color(100,255,0,0)});" /><br />
            <input type="button" value="Fill Green" onclick="poly.setOptions({fillColor: new Microsoft.Maps.Color(100,0,255,0)});" /><br />
            <input type="button" value="Fill Blue" onclick="poly.setOptions({fillColor: new Microsoft.Maps.Color(100,0,0,255)});" /><br />
            <input type="button" value="Color Stroke Red" onclick="poly.setOptions({strokeColor: new Microsoft.Maps.Color(200,255,0,0)});" /><br />
            <input type="button" value="Color Stroke Green" onclick="poly.setOptions({strokeColor: new Microsoft.Maps.Color(200,0,255,0)});" /><br />
            <input type="button" value="Color Stroke Blue" onclick="poly.setOptions({strokeColor: new Microsoft.Maps.Color(200,0,0,255)});" /><br />
            <input type="button" value="Stroke Width 1" onclick="poly.setOptions({strokeThickness: 1});" /><br />
            <input type="button" value="Stroke Width 3" onclick="poly.setOptions({strokeThickness: 3});" /><br />
            <input type="button" value="Stroke Width 5" onclick="poly.setOptions({strokeThickness: 5});" />
        </fieldset>
   </body>
</html>
